<template>
    <div>
        <van-nav-bar
  title="登录"
  left-text="返回"
  left-arrow
  @click-left="$router.back(-1)"
/>
        <div class="logo_div">
            <img src="../../assets/logo.png" class="logo"/>
        </div>

        <h1 class="title">欢迎登录</h1>

        <van-form @submit="onSubmit">
  <van-field
    v-model="formData.user"
    name="用户名"
    label="用户名"
    placeholder="用户名"
    :rules="[{ required: true, message: '请填写用户名' }]"
  />
  <van-field
    v-model="formData.pwd"
    type="password"
    name="密码"
    label="密码"
    placeholder="密码"
    :rules="[{ required: true, message: '请填写密码' }]"
  />
  <div style="margin: 32rem;">
    <van-button round block color="#FFBA33" native-type="submit">
      登录
    </van-button>
  </div>
</van-form>
  <div style="margin: 32rem;">
    <router-link to="/register"><van-button round block native-type="submit">
      注册
    </van-button>
    </router-link>
  </div>

    </div>
</template>

<style scoped>
    div.logo_div{
        width:750rem;
        height: 120rem;
        display: flex;
        align-items: center;
        justify-content:center;
    }
    div.logo_div img{
        width:200rem;
        height: 60rem;
    }
    h1.title{
        font-size:38rem;
        color:#FFBA33;
        text-align: center;
        margin:10rem 0;
    }
</style>

<script>
export default {
    data(){

        return {
            formData:{
                user: '',
                pwd: ''
            }
        }

    },
    methods:{
        onSubmit(){
            let toas1=this.$toast.loading({
              message:'登录中...',
              duration:0,
              forbidclick: true
            })

            let that = this

            this.$axios.post('/login',this.$qs.stringify(this.formData)).then( (res) => {

              if(res.data.code==1){

                that.$toast.success('登录成功~')

                that.$router.push({path:'/'})

              }else{

                that.$toast.fail(res.data.msg)

              }

            } ).catch( (err) => {

              // console.log(err)

              that.$toast.fail('网络繁忙~')

            } )

        }
    }
}
</script>